// rule.js
import {
  CanvasButton
} from '../component/custombutton'
export class Rule {
  constructor(canvas, width, height, continueCallback) {
    this.canvas = canvas;
    this.context = this.canvas.getContext('2d');
    this.width = width;
    this.height = height;
    this.continueCallback = continueCallback;

    this.size_1 = this.width / 100 * 6;
    this.closeWidth = this.width / 2;
    this.clsoeHeight = 40;
    this.button = [];

    this.currentPage = 1;
    this.maxPage = 4;
    this.isAnimating = true;

    this.onLoadImage(() => {
      this.init();
      this.drawButton();
      this.drawPopup();
    });

  }

  init() {
    this.energy = 9;
    this.player = {
      x: Math.floor(this.width * 20 / 100),
      y: Math.floor(this.height / 2),
      width: 50,
      height: 50,
      speedX: 0,
      speedY: 3,
      up: 0, //动画完整播放次数
    }

    this.cube1 = {
      x: this.width - 180,
      y: Math.floor(this.height * 60 / 100),
      width: 90,
      height: 70,
      angle: 0,
      speedX: 0,
      speedY: 0,
      status: 'wood',
      cube: this.wood
    }

    this.cube2 = {
      x: this.width - 180,
      y: Math.floor(this.height * 60 / 100 - 70),
      width: 90,
      height: 70,
      angle: 0,
      speedX: 0,
      speedY: 0,
      status: 'iron',
      cube: this.iron
    }

    this.cube3 = {
      x: this.width - 180,
      y: Math.floor(this.height * 60 / 100 - 140),
      width: 90,
      height: 70,
      angle: 0,
      speedX: 0,
      speedY: 0,
      status: 'gold',
      cube: this.gold
    }
  }

  drawPopup() {
    this.drawAnimate();
  }

  preciousPageButton() {
    this.context.fillStyle = 'rgb(182,214,145)';
    this.context.fillRect(this.width / 2 - 50, this.height * 14 / 18, 100, 20);
    this.context.clearRect(this.width / 100 * 10, this.height / 5, this.width / 100 * 80, this.height / 100 * 57);
    this.init();
    if (this.currentPage === 1) {
      return;
    } else {
      this.currentPage--;
    }
  }

  nextPageButton() {
    this.context.fillStyle = 'rgb(182,214,145)';
    this.context.fillRect(this.width / 2 - 50, this.height * 14 / 18, 100, 20);
    this.context.clearRect(this.width / 100 * 10, this.height / 5, this.width / 100 * 80, this.height / 100 * 57);
    this.init();
    if (this.currentPage === this.maxPage) {
      return;
    } else {
      this.currentPage++;
    }
  }

  drawAnimate() {
    if (this.isAnimating) {
      this.drawModal();
      this.context.font = '20px Arial';
      this.context.fillStyle = 'black';
      this.context.textAlign = 'center';
      this.context.fillText(`${this.currentPage} / ${this.maxPage}`, this.width / 100 * 50, this.height * 80 / 100);
      switch (this.currentPage) {
        case 1:
          this.drawOnePage();
          break;
        case 2:
          this.drawTwoPage();
          break;
        case 3:
          this.drawThreePage();
          break;
        case 4:
          this.drawFourPage();
          break;
      }
    }
    requestAnimationFrame(() => this.drawAnimate());
  }

  drawOnePage() {
    this.context.drawImage(this.background, this.width / 100 * 10, this.height / 5, this.width / 100 * 80, this.height / 100 * 57);
    this.context.drawImage(this.cube1.cube, this.cube1.x, this.cube1.y, 90, 70);
    this.context.drawImage(this.cube2.cube, this.cube2.x, this.cube2.y, 90, 70);
    this.context.drawImage(this.cube3.cube, this.cube3.x, this.cube3.y, 90, 70);
    this.context.drawImage(this.pig, this.player.x, this.player.y, 50, 50);
    if (this.player.y > this.cube1.y + 40) {
      this.player.speedY = -3;
      if (this.player.up === 3) {
        this.player.up = 4;
      }
    } else if (this.player.y < this.cube3.y - 20) {
      this.player.speedY = 3;
    }
    if (this.player.up === 0) {
      if (this.cube1.x >= this.width - 140) {
        this.cube1.x = this.width - 180;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.cube1.speedX = 0;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.x + this.player.width - 1 >= this.cube1.x) {
        this.cube1.speedX = 3;
        this.player.speedX = 0;
      } else if (this.player.y > this.cube1.y + 7 && this.player.y <= this.cube1.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 1) {
      if (this.player.y > this.cube2.y + 7 && this.player.y <= this.cube2.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube2.x) {
        this.cube2.status = 'wood';
        this.cube2.cube = this.wood;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 5 * 3);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    if (this.player.up === 2) {
      if (this.player.y > this.cube3.y + 7 && this.player.y <= this.cube3.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube3.x) {
        this.cube3.status = 'iron';
        this.cube3.cube = this.iron;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    if (this.player.up === 4) {
      this.player.up = 0;
      this.cube3.status = 'gold';
      this.cube3.cube = this.gold;
      this.cube2.status = 'iron';
      this.cube2.cube = this.iron;
    }
    this.cube1.x += this.cube1.speedX;
    this.player.y += this.player.speedY;
    this.player.x += this.player.speedX;
    // this.context.fillStyle = 'red';
    // this.context.beginPath();
    // this.context.moveTo(this.width - 200, this.height / 100 * 68);
    // this.context.lineTo(this.width - 160, this.height / 100 * 74);
    // this.context.lineTo(this.width - 165, this.height / 100 * 75);
    // this.context.lineTo(this.width - 130, this.height / 100 * 77);
    // this.context.lineTo(this.width - 145, this.height / 100 * 72);
    // this.context.lineTo(this.width - 155, this.height / 100 * 73);
    // this.context.lineTo(this.width - 190, this.height / 100 * 67);
    // this.context.closePath();
    // this.context.fill();
  }

  drawTwoPage() {
    this.context.drawImage(this.background, this.width / 100 * 10, this.height / 5, this.width / 100 * 80, this.height / 100 * 57);
    this.drawBlock(this.cube1);
    this.drawBlock(this.cube2);
    this.drawBlock(this.cube3);
    this.context.drawImage(this.pig, this.player.x, this.player.y, 50, 50);
    if (this.player.y > this.cube1.y + 40) {
      this.player.speedY = -3;
      if (this.player.up === 3) {
        this.player.up = 0;
        this.cube3.status = 'gold';
        this.cube3.cube = this.gold;
        this.cube2.status = 'iron';
        this.cube2.cube = this.iron;
      }
    } else if (this.player.y < this.cube3.y - 20) {
      this.player.speedY = 3;
    }
    if (this.player.up === 0) {
      if (this.player.x + this.player.width - 1 >= this.cube1.x) {
        this.cube1.angle = Math.PI / 24
        this.cube2.angle = -Math.PI / 24
        this.player.speedX = 0;
        this.player.speedY = 3;
        this.player.y = Math.floor(this.height / 5 * 3);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.y > this.cube1.y - 26 && this.player.y <= this.cube1.y - 23) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 1) {
      if (this.player.y > this.cube2.y - 26 && this.player.y <= this.cube2.y - 23) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube2.x) {
        this.cube2.angle = 0;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    if (this.player.up === 2) {
      if (this.player.y > this.cube1.y + 36 && this.player.y <= this.cube1.y + 39) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube1.x) {
        this.cube1.angle = 0;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    this.cube1.x += this.cube1.speedX;
    this.player.y += this.player.speedY;
    this.player.x += this.player.speedX;

  }

  drawThreePage() {

    this.context.drawImage(this.background, this.width / 100 * 10, this.height / 5, this.width / 100 * 80, this.height / 100 * 57);
    this.drawBlock(this.cube1);
    this.drawBlock(this.cube2);
    this.drawBlock(this.cube3);
    this.context.drawImage(this.pig, this.player.x, this.player.y, 50, 50);
    if (this.player.y > this.cube1.y + 40) {
      this.player.speedY = -3;
      if (this.player.up === 5) {
        this.player.up = 6;
      }
    } else if (this.player.y < this.cube3.y - 20) {
      this.player.speedY = 3;
    }
    if (this.player.up === 0) {
      if (this.player.x + this.player.width - 1 >= this.cube1.x) {
        this.cube1.angle = Math.PI / 24
        this.cube2.angle = -Math.PI / 24
        this.player.speedX = 0;
        this.player.speedY = 3;
        this.player.y = Math.floor(this.height / 5 * 3);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.y > this.cube1.y - 26 && this.player.y <= this.cube1.y - 23) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 1) {
      if (this.player.y > this.cube2.y + 7 && this.player.y <= this.cube2.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube2.x) {
        this.cube2.status = 'wood';
        this.cube2.cube = this.wood;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 5 * 3);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    if (this.player.up === 2) {
      if (this.player.y > this.cube3.y + 7 && this.player.y <= this.cube3.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube3.x) {
        this.cube3.status = 'iron';
        this.cube3.cube = this.iron;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 5 * 3);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    if (this.player.up === 3) {
      if (this.player.y > this.cube2.y - 26 && this.player.y <= this.cube2.y - 23) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube2.x) {
        this.cube2.angle = 0;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    if (this.player.up === 4) {
      if (this.cube1.x >= this.width - 140) {
        this.cube1.x = this.width - 180;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.cube1.speedX = 0;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.x + this.player.width - 1 >= this.cube1.x) {
        this.cube1.speedX = 3;
        this.cube1.angle = 0;
        this.player.speedX = 0;
      } else if (this.player.y > this.cube1.y + 7 && this.player.y <= this.cube1.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 6) {
      this.player.up = 0;
      this.cube3.status = 'gold';
      this.cube3.cube = this.gold;
      this.cube2.status = 'iron';
      this.cube2.cube = this.iron;
    }
    this.cube1.x += this.cube1.speedX;
    this.player.y += this.player.speedY;
    this.player.x += this.player.speedX;

  }

  drawFourPage() {
    this.context.drawImage(this.background, this.width / 100 * 10, this.height / 5, this.width / 100 * 80, this.height / 100 * 57);
    this.drawBlock(this.cube1);
    this.drawBlock(this.cube2);
    this.drawBlock(this.cube3);
    this.context.drawImage(this.pig, this.player.x, this.player.y, 50, 50);
    if (this.player.y > this.cube1.y + 40) {
      this.player.speedY = -3;
      if (this.player.up === 6) {
        this.player.up = 7;
      }
    } else if (this.player.y < this.cube3.y - 20) {
      this.player.speedY = 3;
    }
    if (this.player.up === 0) {
      if (this.cube1.x >= this.width - 140) {
        this.cube1.x = this.width - 180;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.cube1.speedX = 0;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.x + this.player.width - 1 >= this.cube1.x) {
        if (this.energy < 10) {
          this.energy++;
        }
        this.cube1.speedX = 3;
        this.player.speedX = 0;
      } else if (this.player.y > this.cube1.y + 7 && this.player.y <= this.cube1.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 1) {
      if (this.cube2.x >= this.width - 140) {
        this.cube2.x = this.width - 180;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.cube2.speedX = 0;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.x + this.player.width - 1 >= this.cube2.x) {
        this.energy = 9;
        this.cube2.speedX = 3;
        this.player.speedX = 0;
      } else if (this.player.y > this.cube2.y + 7 && this.player.y <= this.cube2.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 2) {
      if (this.cube1.x >= this.width - 140) {
        this.cube1.x = this.width - 180;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.cube1.speedX = 0;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.x + this.player.width - 1 >= this.cube1.x) {
        if (this.energy < 10) {
          this.energy++;
        }
        this.cube1.speedX = 3;
        this.player.speedX = 0;
      } else if (this.player.y > this.cube1.y + 7 && this.player.y <= this.cube1.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 3) {
      if (this.player.y > this.cube3.y + 7 && this.player.y <= this.cube3.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
      if (this.player.x + this.player.width >= this.cube3.x) {
        this.energy = 9;
        this.cube3.status = 'wood';
        this.cube3.cube = this.wood;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.player.up++;
        this.player.y = Math.floor(this.height / 5 * 3);
        this.player.x = Math.floor(this.width * 20 / 100);
      }
    }
    if (this.player.up === 4) {
      if (this.cube1.x >= this.width - 140) {
        this.cube1.x = this.width - 180;
        this.player.speedY = 3;
        this.player.speedX = 0;
        this.cube1.speedX = 0;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.x + this.player.width - 1 >= this.cube1.x) {
        if (this.energy < 10) {
          this.energy++;
        }
        this.cube1.speedX = 3;
        this.player.speedX = 0;
      } else if (this.player.y > this.cube1.y + 7 && this.player.y <= this.cube1.y + 10) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 5) {
      if (this.cube3.x >= this.width - 140) {
        this.cube3.x = this.width - 180;
        this.player.speedY = 3;
        this.cube3.speedX = 0;
        this.player.y = Math.floor(this.height / 2);
        this.player.x = Math.floor(this.width * 20 / 100);
        this.player.up++;
      } else if (this.player.x + this.player.width - 1 >= this.cube2.x) {
        this.energy = 9;
        this.cube2.status = 'wood';
        this.cube2.cube = this.wood;
        this.cube3.speedX = 3;
        this.player.speedX = 0;
      } else if (this.player.y > this.cube2.y - 26 && this.player.y <= this.cube2.y - 23) {
        this.player.speedY = 0;
        this.player.speedX = 3;
      }
    }
    if (this.player.up === 7) {
      this.player.up = 0;
      this.cube3.status = 'gold';
      this.cube3.cube = this.gold;
      this.cube2.status = 'iron';
      this.cube2.cube = this.iron;
    }
    this.drawSegmentedRoundedRect(this.context, this.width / 100 * 13, this.height / 100 * 30, 10, this.height / 100 * 40, 20, this.energy);
    if (this.energy === 10) {
      this.context.fillStyle = 'black';
      this.context.font = '900 9px Arial'
      this.context.fillText('x', this.width / 100 * 13 + 4, this.height / 2 + 10);
      this.context.fillText('a', this.width / 100 * 13 + 4.5, this.height / 2);
      this.context.fillText('m', this.width / 100 * 13 + 4, this.height / 2 - 10);
    } else {
      this.context.fillStyle = 'black';
      this.context.font = '800 8px Arial'
      this.context.fillText(`10`, this.width / 100 * 13 + 4.5, this.height / 2 + 10);
      this.context.fillText(`/`, this.width / 100 * 13 + 5, this.height / 2);
      this.context.fillText(`${this.energy}`, this.width / 100 * 13 + 5, this.height / 2 - 10);
    }
    this.cube1.x += this.cube1.speedX;
    this.cube2.x += this.cube2.speedX;
    this.cube3.x += this.cube3.speedX;
    this.player.y += this.player.speedY;
    this.player.x += this.player.speedX;

  }

  drawBlock(block) {
    this.context.save();
    this.context.translate(block.x + block.width / 2, block.y + block.height / 2);
    this.context.rotate(block.angle);
    this.context.translate(-block.width / 2, -block.height / 2);
    this.context.drawImage(block.cube, 0, 0, block.width, block.height);
    this.context.restore();
  }

  drawButton() {
    let _this = this
    this.preciousPage = {
      type: "text",
      text: "上一页",
      style: {
        left: this.width / 100 * 20,
        top: this.height * 15 / 19,
        width: this.width / 100 * 16,
        height: this.height / 42.2,
        textColor: "black",
        fontSize: `${this.height / 42.2}px`,
        textAlign: "center",
        textDecorationLine: "underline"
      },
      success(button) {
        _this.button.push(button);
        button.drawButton(_this.context); // 绘制按钮
        button.onTap((res) => {
          _this.preciousPageButton();
        })
      },
    };
    new CanvasButton(this.preciousPage);

    this.nextPage = {
      type: "text",
      text: "下一页",
      style: {
        left: this.width / 100 * 64,
        top: this.height * 15 / 19,
        width: this.width / 100 * 16,
        height: this.height / 42.2,
        textColor: "black",
        fontSize: `${this.height / 42.2}px`,
        textAlign: "center",
        textDecorationLine: "underline"
      },
      success(button) {
        _this.button.push(button);
        button.drawButton(_this.context); // 绘制按钮
        button.onTap((res) => {
          _this.nextPageButton();
        })
      },
    };
    new CanvasButton(this.nextPage);

    let reback = {
      type: "image",
      image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/reback.png",
      style: {
        left: this.width / 4,
        top: this.height * 19 / 23,
        width: this.width / 2,
        height: this.size_1 * 2,
        backgroundColor: 'transparent',
      },
      success(button) {
        _this.button.push(button);
        button.drawButton(_this.context); // 绘制按钮
        button.onTap((res) => {
          _this.isAnimating = false;
          _this.buttonDestroy();
          _this.continueCallback();
        })
      },
    };
    new CanvasButton(reback);
  }

  drawModal() {
    // 调整弹窗的大小和位置
    const modalWidth = this.width / 100 * 88;
    const modalHeight = this.height * 7 / 9;
    const modalX = this.width / 100 * 6;
    const modalY = this.height / 8;

    // 绘制背景图片
    this.context.drawImage(this.bg_image, modalX, modalY, modalWidth, modalHeight);

    this.context.font = 'bold 24px Arial';
    this.context.fillStyle = 'red';
    this.context.textAlign = 'center';
    this.context.fillText('玩法必看', this.width / 2, this.height / 6);
  }

  drawRoundedRect(context, x, y, width, height, radius, color, borderWidth, borderColor) {
    context.beginPath();
    radius = Math.min(radius, width / 2, height / 2);

    context.moveTo(x + radius, y);
    context.lineTo(x + width - radius, y);
    context.arcTo(x + width, y, x + width, y + height, radius);
    context.lineTo(x + width, y + height - radius);
    context.arcTo(x + width, y + height, x, y + height, radius);
    context.lineTo(x + radius, y + height);
    context.arcTo(x, y + height, x, y, radius);
    context.lineTo(x, y + radius);
    context.arcTo(x, y, x + width, y, radius);

    context.closePath();

    // 填充颜色
    context.fillStyle = color;
    context.fill();

    // 绘制边框
    context.lineWidth = borderWidth;
    context.strokeStyle = borderColor;
    context.stroke();
  }

  drawSegmentedRoundedRect(context, x, y, width, height, radius, energy) {
    // 绘制背景圆角矩形
    this.drawRoundedRect(context, x, y, width, height, radius, 'rgba(128,128,128,0)', 1, 'black');

    // 计算填充的部分宽度
    const filledHeight = (energy / 10) * height;

    // 清除填充部分的区域
    context.save();
    context.globalCompositeOperation = 'destination-out'; // 只清除绘制区域
    context.beginPath();
    context.moveTo(x + radius, y);
    context.lineTo(x + width - radius, y);
    context.arcTo(x + width, y, x + width, y + filledHeight, radius);
    context.lineTo(x + width, y + filledHeight - radius);
    context.arcTo(x + width, y + filledHeight, x, y + filledHeight, radius);
    context.lineTo(x + radius, y + filledHeight);
    context.arcTo(x, y + filledHeight, x, y, radius);
    context.lineTo(x, y + radius);
    context.arcTo(x, y, x + width, y, radius);
    context.closePath();
    context.fill(); // 清除指定区域
    context.restore();

    // 绘制完整的圆角矩形
    context.save();
    context.beginPath();
    context.translate(x, y); // 移动到矩形左上角

    if (energy < 10) {
      var color = 'rgba(0, 0, 255, 0.7)';
    } else {
      color = 'red';
    }
    // 绘制填充部分的圆角矩形
    if (energy > 0)
      this.drawRoundedRect(context, 0, 0, width, filledHeight, radius, color, 1, 'black');
    context.restore();
  }

  buttonDestroy() {
    this.button.forEach(bt => {
      bt.destroy();
    });
  }

  onLoadImage(callback) {
    let loadedCount = 0;
    const totalImages = 7;

    this.bg_image = wx.createImage();
    this.bg_image.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/background/background_3.png'; // 替换为你的背景图片路径
    this.bg_image.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
    };

    this.iron = wx.createImage();
    this.iron.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/iron.png';
    this.iron.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
    };

    this.wood = wx.createImage();
    this.wood.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/wood.png';
    this.wood.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
    };

    this.gold = wx.createImage();
    this.gold.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/gold.png';
    this.gold.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
    };

    this.pig = wx.createImage();
    this.pig.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/pig1.png';
    this.pig.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
    };

    this.background = wx.createImage();
    this.background.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/background/background_1.png';
    this.background.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
    };

    this.rebackImage = wx.createImage();
    this.rebackImage.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/reback.png';
    this.rebackImage.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
    };

    const checkIfAllLoaded = () => {
      if (loadedCount === totalImages && callback) {
        callback();
      }
    };
  }

}
